<script lang="ts" setup>
import { MenuType, type MenuInfo } from "@/models";
import { computed } from "vue";
import { useRouter } from "vue-router";
import IconSymbol from "./icon-symbol.vue";

const { 子系统, 目录, 页面, 信息 } = MenuType;
const props = defineProps<{ data: MenuInfo }>();
const router = useRouter();
const hasChild = computed(() => props.data.children && props.data.children.length);
const isBranch = computed(() => props.data.type === 子系统 || props.data.type === 目录);
const isLeaf = computed(() => props.data.type === 页面 || props.data.type === 信息);

async function handleClick() {
  const menu = props.data;
  if (menu.type === 信息) {
    window.open(menu.path, "_blank");
  } else {
    await router.push(menu.path);
  }
}
</script>

<template>
  <div>
    <el-sub-menu v-if="isBranch" :index="data.code">
      <template #title>
        <icon-symbol v-if="!!data.icon" class="m-r-1" :name="data.icon" />
        <span v-text="data.title"></span>
      </template>
      <template v-if="hasChild">
        <menu-render v-for="child in data.children" :key="child.id" :data="child" />
      </template>
    </el-sub-menu>
    <el-menu-item v-if="isLeaf" :index="data.code" @click="handleClick">
      <icon-symbol v-if="!!data.icon" class="m-r-1" :name="data.icon" />
      <span v-text="data.title"></span>
    </el-menu-item>
  </div>
</template>

<style lang="scss" scoped></style>
